<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/style.css"/>
		<style type="text/css">
			.no_transition{
				-webkit-transition: none !important;
    				transition: none !important;
			}
		</style>
	</head>
	<body>
		
		
<div class="lunbo_wrap">
	<!--图片区域-->
	<ul>
		<li>
			<img src="images/kv1.jpg"/>
		</li>
		<li>
			<img src="images/kv2.jpg"/>
		</li>
		<li>
			<img src="images/kv3.jpg"/>
		</li>
		<li>
			<img src="images/kv4.jpg"/>
		</li>
	</ul>
	<a class="l_button"></a>
	<a class="r_button"></a>
	<div class="lunbo_controll">
		<a class="selecting"></a>
		<a></a>
		<a></a>
		<a></a>
	</div>
</div>

<script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	var screen = $(document).width();//window.innerWidth/window.innerHeight
	var lis = $(".lunbo_wrap li");
	lis.css("width",screen+"px");
	var left = 0;//初始的位置为0
	var l_button = $(".l_button");
	var r_button = $(".r_button");
	var ul = $(".lunbo_wrap ul");
	var a = $(".lunbo_controll a");
	var animation_time=500;//动画时间，毫秒单位
	var activeIndex = 0;
	var canScroll=true;
	var to_append_li ;//做无限轮播时，需要记录下哪个li，等到切换完成，重新放回到原位
	function loop(direction){
		if(direction=="right"){
			var cur_li = lis.eq(--activeIndex);//当前的li
			cur_li.after(cur_li.prevAll().get().reverse());//把当前li的前面所有兄弟元素，插入到当前li的后面，要注意用reverse倒转元素数组的顺序，例如原来是1、2、3、4,现在变成4、1、2、3 的顺序
			
			//做一次无过渡动画的位移
			scroll_pos(cur_li.position().left,false);
           
           //等10ms后，重新把过渡动画开启
            setTimeout(function(){
                
                //移动到真正的第一屏
                show_img(1);
				show_dian(0);
		       
		       
				setTimeout(function(){
					//然后把当前这一屏重新加回到原来的最后位置
					ul.append(cur_li);
					
					//重新定位当前索引
					activeIndex=0;
					
					//最后，重新做一次无过渡动画的位移
					scroll_pos(activeIndex*screen,false);
					
	           		//最后，再次记得重新打开过渡动画
//	           		setTimeout(function(){
//              			ul.removeClass("no_transition");	
//					},10)
		       }	,animation_time+50)
		        
            },10);
          
		}else{
			var cur_li = lis.eq(++activeIndex);//当前的li
			cur_li.before(cur_li.nextAll());//把当前li的前面所有兄弟元素，插入到当前li的前面，例如原来是1、2、3、4,现在变成2、3、4、1 的顺序
			
			//做一次无过渡动画的位移
			scroll_pos(cur_li.position().left,false);
           //等10ms后，重新把过渡动画开启
            setTimeout(function(){
                //移动到真正的最后一屏
                show_img(lis.length-2);
                
				show_dian(lis.length-1);
		       
		       
				setTimeout(function(){
					//然后把当前这一屏重新加回到原来的开始位置
					ul.prepend(cur_li);
					
					//重新定位当前索引
					activeIndex=lis.length-1;
					
					//最后，重新做一次无过渡动画的位移
					scroll_pos(activeIndex*screen,false);
					
	           		//最后，再次记得重新打开过渡动画
//	           		setTimeout(function(){
//              			ul.removeClass("no_transition");	
//					},10)
		       }	,animation_time+50)
		        
            },10);
		}
	}
	r_button.on("click",function(e){
		if(!canScroll){
			return;
		}
		canScroll=false;
		activeIndex++;
		if(activeIndex>=lis.length){
//			activeIndex=0;//判断图片是否已经到达最后一张，如果是最后一张，则重新定位在第一张
			loop("right");//做到无缝拼接
			return;
		}
		show_img();
		show_dian();
	})
	
	
	/**left值与图片下标索引的关系
	 * 显示第一张图   i:0  宽度:100    left:0 
	 * 显示第二张图   i:1  宽度:100    left:-100
	 * 显示第三张图   i:2  宽度:100    left:-200
	 * 推断出该公式：left = -i * width
	 */
	l_button.on("click",function(e){
		if(!canScroll){
			return;
		}
		canScroll=false;
		activeIndex--;
		if(activeIndex<0){
//			activeIndex=lis.length-1;//判断图片是否已经到达第一张，如果是第一张，则重新定位在最后一张
			
			loop("left");//做到无缝拼接
			return;
		}
		
		show_img();
		show_dian();
	})
	
	
	a.on("click",function(e){
		if(!canScroll){
			return;
		}
		canScroll=false;
		activeIndex = $(this).index();//把最新的下标更新到当前索引
		show_img();
		show_dian();
	})
	
//	var  t = setInterval(function(){
//		if(!canScroll){
//			return;
//		}
//		canScroll=false;
//		activeIndex++;
//		if(activeIndex>=lis.length){
//			activeIndex=0;
//		}
//		show_img();
//		show_dian();
//		
//	},2000)
	
	
	$(".lunbo_wrap").on("mouseover",function(){
		clearInterval(t);
	})
	$(".lunbo_wrap").on("mouseout",function(){
		t = setInterval(function(){
			
			activeIndex++;
			if(activeIndex>=lis.length){
				activeIndex=0;
			}
			show_img();
		},1000)
	})

	
	
	/**
	 * 
	 * @param {Object} pos					滚动位置
	 * @param {Object} has_animate			是否需要动画
	 */
	function  scroll_pos(pos,has_animate){
		if(has_animate===false){
			ul.addClass("no_transition");//禁止过渡动画
		}else{
			ul.removeClass("no_transition");//开启过渡动画
		}
		ul.css({
            '-webkit-transform': 'translate3d(-'+pos+'px, 0px, 0px)',
            '-moz-transform': 'translate3d(-'+pos+'px, 0px, 0px)',
            '-ms-transform':'translate3d(-'+pos+'px, 0px, 0px)',
            'transform': 'translate3d(-'+pos+'px, 0px, 0px)'
       	});
	}
	
	function show_img(index){
		var index = typeof index !=="undefined"?index:activeIndex;
		var cur_li_pos = index*screen;
		scroll_pos(cur_li_pos);
		setTimeout(function(){
			canScroll = true;
		},animation_time+100)
	}
	
	
	//改变控制台的圆点显示顺序
	function show_dian(index){
		var index = typeof index !=="undefined"?index:activeIndex;
		a.eq(index).addClass("selecting").siblings().removeClass("selecting");
	}
	
	div.on("touchmove")
	
</script>
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
		
	</body>
</html>
